<template>
	<view>
		<Header type="back" to="home" title="积分商城" />
		<view class="bg-f8ff w-100 ab left0 bottom0 rounded-right" :class="'top'+toprpx" >
			<view class="w-100 px-2-6 pt-5">
				<view class="w-100 h160 p-4 bg-white circle32 show0 f-b-c">
					<view>
						<view class="font32 h32 f-y-c font600">
							我的积分
							<view @click="get_record" class="ml-6 h24 font24 t-20 font400 f-s-c">积分明细<image src="../../static/icon_right_0.png" class="w24 h24"/></view>
						</view>
						<view class="t-theme_1 font45 h38 f-y-c font700 mt-1">{{userInfo.remainIntegral}}</view>
					</view>
					<view class="h24 font24 t-20 font400 f-s-c" @click="get_exchange">
						兑换记录<image src="../../static/icon_right_0.png" class="w24 h24"/>
					</view>
				</view>
			</view>
			<view class="w-100 px-2-6 pt-5 pb-3 re">
				<view class="w-100 h1 bg-ccc ab top34"></view>
				<view class="w-100 h8 f-c-c ab z-99 top34 left0">
					<text class="font25 t-20 font400 px-4 bg-f8ff">商品兑换</text>
				</view>
			</view>
			<scroll-view class="scroll-view_H top290 uni-scroll" scroll-y="true">
				<view class="w-100 fs-b-b py-2 px-2-6">
					<view v-for="(item,index) in integral" :key="item.id" class="w336 circle28 show0 mb-3 ov-hd " @click="get_details(item)">
						<ImageFile :url="item.thumbnail" className="w-100 h336 re z-99"/>
						<view class="ty-line-info w-100 px-3 h110 bg-white re z-999 ty-circle28" style="padding: 26rpx;">
							<HornMargin type="left-top" :width="44" :height="40" />
							<view class="font30 h30 t-20 font600 f-y-c">{{item.goodsName || '-'}}</view>
							<view class="t-8 font20 h20 f-y-c font400 mt-1">{{item.integral || '-'}}积分 <text class="ml-4"></text>销量{{item.realSales || '0'}}</view>
						</view>
					</view>
				</view>
				
				<view class="w-100 t-a font24 t-3 pt-12 pb-1" v-if="!integral.length">暂无数据</view>
				
				<view class="w-100 h160"></view>
			</scroll-view>
		</view>
		<Footer index="my"></Footer>
	</view>
</template>

<script>
	import HornMargin from "../../components/horn_margin.vue"
	import Header from "../../components/header.vue"
	import Footer from "../../components/footer.vue"
	import ImageFile from "../../components/img_file.vue"
	
	import {integralList} from "../../api/user.js"
	
	export default {
		components: {
			Header,HornMargin,Footer,ImageFile
			
		},
		data() {
			return {
				toprpx: 220,
				integral:[],
				query:{
					currentPage:1,
					pageSize:10,
				},
				userInfo:{}
			}
		},
		onShow() {
			this.get_mallList()
			this.userInfo = uni.getStorageSync('userInfo') || {}
		},
		mounted() {
			// this.get_mallList()
			this.toprpx = uni.getStorageSync("toprpx")
			
		},
		methods:{
			get_record(){
				uni.navigateTo({
					url:"/pages/integral/record"
				})
			},
			get_exchange(){
				uni.navigateTo({
					url:"/pages/integral/exchange"
				})
			},
			get_details(val){
				uni.setStorageSync("shop_details",val) 
				uni.navigateTo({
					url:"/pages/integral/details"
				})
			},
			async get_mallList(){
				const {code,body} = await integralList(this.query)
				if(code === '0'){
					this.integral = body.records
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view_H {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9;
	}
	.ty-circle28{
		border-radius: 0 34rpx 0 0;
		margin-top: -30rpx;
	}
</style>
